<template>
	<view>
		<view class="smart-panel-head">
					<view class="smart-panel-head-title">Label 标签组件</view>
				</view>
				
				<view class="smart-padding-wrap">
					<view class="item-title">基础颜色标签</view>
					<view class="label-group">
						<view class="label primary">默认</view>
						<view class="label success">成功</view>
						<view class="label warn">警告</view>
						<view class="label error">危险</view>
					</view>
		
					<view class="item-title">可选中标签</view>
					<view class="label-group">
						<view class="label outline" :class="{selected: active === 1}" @click="active=1">
							选项1
						</view>
						<view class="label outline" :class="{selected: active === 2}" @click="active=2">
							选项2
						</view>
						<view class="label outline" :class="{selected: active === 3}" @click="active=3">
							选项3
						</view>
					</view>
				</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: 1
			}
		},
		methods: {
			
		}
	}
</script>

<style>
.panel-head {
		padding: 20rpx 30rpx;
		border-bottom: 1px solid #f5f5f5;
	}
	.panel-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}
	.padding-wrap {
		padding: 30rpx;
	}
	.item-title {
		margin: 30rpx 0 20rpx;
		font-size: 26rpx;
		color: #333;
	}

	.label-group {
		display: flex;
		gap: 16rpx;
		flex-wrap: wrap;
	}
	.label {
		padding: 8rpx 20rpx;
		border-radius: 30rpx;
		font-size: 24rpx;
		color: #fff;
	}
	.primary { background: #007AFF; }
	.success { background: #00C853; }
	.warn { background: #FFBB33; }
	.error { background: #FF4444; }
	.outline {
		background: transparent;
		border: 1px solid #999;
		color: #666;
	}
	.selected {
		background: #007AFF;
		border-color: #007AFF;
		color: #fff;
	}
</style>
